<template>
    <div id="input">
        <h1>记事本</h1>
        <input v-model="message" @keyup.enter="createOne()">
        {{ message }}
        <br>
    </div>
    <div v-if="list.length > 0" id="display">
        <ul>
            <li v-for="(val, index) in list" :key="index">
                <div class="index">
                    <span>{{ index + 1  }}</span>
                </div>
                <span class="value">{{ val }}</span>
                <div class="btn">
                    <button @click="deleteOne(index)">
                        删除
                    </button>
                </div>
                <hr>
            </li>
        </ul>

        <br>
        条数：{{ list.length }}
        <button @click="deleteAll()">
            清除所有记录
        </button>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            message: '',
            list: ['hello']
        })

        const createOne = () => {
            state.list.push(state.message)
            state.message = ''
        }

        const deleteOne = (index) => {
            state.list.splice(index,1)
        }

        const deleteAll = () => {
            state.list = []
        }

        return {
            ...toRefs(state),
            createOne,
            deleteOne,
            deleteAll
        }
    }
}
</script>

<style scoped>
ul{
    width: 100%;
    list-style-type: none;
}
ul>li{
    width: 75%;
    height: 50px;
    margin: 0 auto;
    font-size: 35px;
}

.index{
    float: left;
    height: 90%;
    width: 30px;
    background-color: aqua;
}

.btn{
    height: 100%;
    float: right;
    margin-right: 20px;
    text-align: center;
}
.btn>button{
    height: 80%;
    text-align: center;
}

</style>